Prizm Content Connect
Embedding the Viewer
| Working with the Viewer > Integrating with Your Application > Embedding the Viewer |
The Viewer is delivered as a configurable jQuery plugin. The viewer can be initialized with a number of configuration options. See Developer Reference > Configuration Options for more detail on initializing the viewer.
 |
The viewer requires the Prizm Services backend to be running in order to supplement viewing session requests. Also, standard use should include a web-tier application which will handle the request-and-response between the viewer and the Prizm Services backend. |
The jQuery plugin is built using several open-source CSS, JavaScript, and HTML template files. These files implement the Viewer UI-chrome, which includes all of the Viewer tabs, buttons, dialogs, and inputs.
These meta tags are important in enabling Internet Explorer support and maximizing viewport area:
| Example |
Copy Code
|
|---|---|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|
In order to use the UI-chrome you must link to the following stylesheets:
| Example |
Copy Code
|
|---|---|
<link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/viewercontrol.css"> <link rel="stylesheet" href="css/viewer.css"> |
|
The following scripts are required:
| Example |
Copy Code
|
|---|---|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/underscore.min.js"></script> <script src="js/viewercontrol.js"></script> <script src="js/viewer.js"></script> |
|
You must add a div element with an id that will be used to initialize the Viewer plugin:
| Example |
Copy Code
|
|---|---|
<div id="myDiv"></div>
|
|
Include this condition for legacy (IE8) support:
| Example |
Copy Code
|
|---|---|
<!--[if lt IE 9]> <link rel="stylesheet" href="css/legacy.css"> <script src="js/html5shiv.js"></script> <![endif]--> |
|
A jQuery plugin is used to embed the full-featured, responsive viewer on the page:
| Example |
Copy Code
|
|---|---|
$("#myDiv").pccViewer(pluginOptions);
|
|
The Viewer UI and behavior can be configured when the Viewer is embedded, using JavaScript parameters:
| Example |
Copy Code
|
|---|---|
var pluginOptions = {
documentID: viewingSessionId,
language: languageItems,
template: htmlTemplates
}
|
|
 |
The documentID, language, and template parameters are required to initialize the Viewer plugin. |
There are a few issues that may arise while initializing the Viewer that may not be immediately obvious. Here are some common console errors and their possible causes: